<template>
  <div class="main">
    <div class="head">
      <img src="@/assets/dikede.png" alt="" />
      <div class="right">
        <img src="@/assets/tx.png" alt="" />
        <span>欢迎您, {{username}}</span>
      </div>
      <div class="out">
        <span @click="logout">退出</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
    </div>
    <el-col :span="12">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
         v-infinite-scroll="load" style="overflow:auto"
         infinite-scroll-disabled="disabled">
        <el-menu-item index="1"  @click="$router.push('/layout')">
          <template slot="title">
            <i class="iconfont icon-fangwu"></i>
            <span>帝可得</span>
          </template>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="iconfont icon-caidan"></i>
            <span slot="title">工商管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="$router.push('/yunying')" >运营工单</el-menu-item>
            <el-menu-item index="1-2"  @click="$router.push('/yunwei')">运维工单</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="iconfont icon-dingwei"></i>
            <span slot="title">点位管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"  @click="$router.push('/quyu')" >区域管理</el-menu-item>
            <el-menu-item index="1-2"  @click="$router.push('/dianwei')" >点位管理</el-menu-item>
            <el-menu-item index="1-2"  @click="$router.push('/hezuo')">合作商管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="iconfont icon-fadianji"></i>
            <span slot="title">设备管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">设备管理</el-menu-item>
            <el-menu-item index="1-2">设备状态</el-menu-item>
            <el-menu-item index="1-2">设备类型管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="iconfont icon-renyuan"></i>
            <span slot="title">人员管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">人员列表</el-menu-item>
            <el-menu-item index="1-2">人效统计</el-menu-item>
            <el-menu-item index="1-2">工作量列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="iconfont icon-pintu-m"></i>
            <span slot="title">商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">商品类型</el-menu-item>
            <el-menu-item index="1-2">商品管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="7">
          <template slot="title">
            <i class="iconfont icon-diandeng-dengpao-zhaoming"></i>
            <span>策略管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="8">
          <template slot="title">
            <i class="iconfont icon-quanbudingdan"></i>
            <span>订单管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="9">
          <template slot="title">
            <i class="iconfont icon-zhangben"></i>
            <span>对账统计</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-col>
     <router-view></router-view>
      

  </div>
</template>

<script>

import {mapState} from 'vuex'


export default {
 
  data(){
    return{
        count:0
    }
  },

  computed:{
    ...mapState('son',['username'])
  },
 mounted(){
        
 },
  methods: {
      load () {
        this.count += 1
      },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      this.$store.dispatch('son/deleToken')
      this.$router.push('login')
    }
  },
};
</script>

<style scoped lang="scss">
.main {



right: 0;

left: 0;


}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
.head {
  position: relative;
  position: fixed !important;
  z-index: 10;
  top: 0px;
  width: 100vw;
  height: 60px;
  display: flex;
  background: url(@/assets/head.png);
  img {
    width: 88px;
    height: 35px;
    margin-top: 10px;
    margin-left: 5px;
  }
  .right {
    right: 120px;
    position: absolute;
    line-height: 60px;
    display: flex;
    img {
      width: 50px;
      height: 40px;
    }
    span {
      color: #dee4f8;
      margin-left: 10px;
      font-size: 15px;
    }
  }
  .out {
    position: absolute;
    line-height: 60px;
    color: #d3dbf6;
    right: 50px;
  }
}
.el-col-12 {
  width: 135px;
  .el-menu{
    height: 100%;
  }
}
.el-menu-item {
  font-size: 12px;
}
::v-deep {
  .el-submenu__title {
    font-size: 12px;
  }
  .el-submenu .el-menu-item {
    color: #999999;
  }
}
.el-menu {
  span {
    margin-left: 10px;
  }
}
.el-col-12 {
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 80px;
   ::-webkit-scrollbar {
   width: 6px;
}
}
.maincontain {
  position: absolute;
  background-color: #f8fafd;
  top: 80px;
  left: 150px;
  width: 90%;
  height: 1000px;
 .maintop{
   position: relative;

  .list {
   position: absolute;
   right: 0;
   top: 0;
   
    
    width: 500px;
    height: 508px;
 
    border-radius: 20px;
    .listtop{
      display: flex;
      padding: 20px;
      background-color: #fff;
      border-radius: 20px;
       div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
  }
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
.maincontain {
 
  .mainhead {
    display: flex;
    width: 1200px;
    height: 140px;
    //  background-color: pink;
    margin-left: 0px;
    margin-top: 18px;
    margin-right: 18px;
    margin-bottom: 18px;
  }
  .mainleft {
    width: 700px;
    height: 160px;
    background-color: #e9f3ff;
    background-image: url(~@/assets/icon2.png), url(~@/assets/icon1.png);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    background-position-x: 0px, calc(100% - 12px);
    background-position-y: 0px, 100%;
    border-radius: 20px;
    h1 {
      color: #072074;
      font-style: normal;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    }
    span {
      font-size: 12px;
      color: #9cabdd;
    }
    .lefttop {
      display: flex;
      margin-top: 10px;
      margin-left: 10px;
      div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
    .leftbody {
      display: flex;
      justify-content: space-around;
      div {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        // background-color: pink;
      }
    }
  }
  .mainright {
    width: 600px;
    height: 160px;
    margin-left: 15px;
    border-radius: 20px;
    background-color: #fbefe8;
    background-image: url(), url(~@/assets/icon3.png);
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    background-position-x: 0px, calc(100% - 12px);
    background-position-y: 0px, 100%;
    border-radius: 20px;
    h1 {
      color: #ff5757;
      font-style: normal;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    }
    span {
      font-size: 12px;
      color: #dfa6b1;
    }
    .lefttop {
      display: flex;
      margin-top: 10px;
      margin-left: 10px;
      div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
    .leftbody {
      display: flex;
      justify-content: space-around;
      div {
        margin-top: 10px;
        width: 80px;
        height: 80px;
        // background-color: pink;
      }
    }
  }
}

.d1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.d2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.d3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.d4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sale {
margin-top: 60px;
  
  height: 328px;
  width: 1200px;
  border-radius: 20px;
  background-color: #fff;
   .charts{
    display: flex;
    .leftchart{
      width: 600px;
      height: 278px;

    }
    .rightchart{
       width: 600px;
      height: 278px;

    }
   }

  .header {
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    width: 100%;
    height: 34px;
    .week-month-year{
      text-align: center;
    display: flex;
     width: 129px;
     height: 34px;
     line-height: 34px;
      background: rgba(233,243,255,.37);
    border-radius: 10px;
      .item{
        width: 37px;
        height: 25px;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .left {
      width: 1100px;
      display: flex;
      div {
        color: black;
        font-weight: 700;
        font-size: 15px;
      }
      span {
        margin-left: 5px;
        font-size: 10px;
        color: #b4aeb4;
      }
    }
  }

}
.maincontain .el-row[data-v-7eb2bc79] {
    margin-bottom: 10px;
}
.el-row {
  line-height: 36px;
}
.maincontain .bg-purple-light[data-v-7eb2bc79] {
    background:#ffffff;
}

.maincontain .bg-purple[data-v-7eb2bc79] {
    background: #fff;
    padding-left: 20px;
   
}
.grid-content{
  line-height: 36px;
}
.left{
  background-color: #fff;
}
.week-month-year{
   background-color: #fff;
}
.foot{
  position: relative;
  margin-right: 30px;
  display: flex;
  width: 900px;
  height: 360px;

  background-color: #fff;

  border-radius: 20px;
      .right{
        text-align: center;
        h2 {
          color: #072074;
        }
        span {
          color: #000c20;
        }
      }
    h4 {
      margin-left: 20px;
    }
    .iconfont{
     position: absolute;
     right: 20px;
     top: 20px;
    
  
      font-size:25px;
      color: #aabeff;
    }
    .left {
      position: absolute;
      top: 90px;
      width: 540px;
      height: 280px;
      background-color: #fff;
    }
    .right {
      position: absolute;
      width: 150px;
      height: 230px;
      top: 100px;
      right: 80px;
      border-radius: 20px;
      background-color: #f8f8f9;
      
    }
}
.footright{

position: relative;
  border-radius: 20px;

  height: 360px;
  width: 825px;
  background-color: #fff;
  .data{
    position: absolute;
    top: 72%;
    left: 44%;
  }
  .mid {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 150px;
    height: 100px;
    // background-color: pink;
  }
  h4 {
      margin-left: 20px;
  }
   .iconfont{
   
    position: absolute;
 right: 20px;
     top: 20px;
    
      font-size:25px;
      color: #aabeff;
    }
}
.allfoot{
display: flex;
margin-top: 20px;

  width: 100%;
  height: 360px;

}
</style>
 